<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>强制横屏demo</title>
    <style type="text/css">
    @media screen and (orientation: portrait) {
      html{
         width : 100% ;
         height : 100% ;
          background-color: white ;
          overflow : hidden;
      }
      body{
          width : 100% ;
         height : 100% ;
         background-color: red ;
          overflow : hidden;
      }
      #print{
         position : absolute ;
         background-color: yellow ;
      }
    } 
    @media screen and (orientation: landscape) {
       html{
         width : 100% ;
         height : 100% ;
         background-color: white ;
      } 
       body{
          width : 100% ;
         height : 100% ;
         background-color: white ;
      }
           #print{
            position : absolute ;
            top : 0 ; 
            left : 0 ;
            width : 100% ;
            height : 100% ;
            background-color: yellow ;
         }
    }
    #print p{
        margin: auto ;
        margin-top : 20px ;
        text-align: center;
      }
    </style>
    <script src="jquery-1.12.2.min.js"></script>
    <script>
    var evt = "onorientationchange" in window ? "orientationchange" : "resize";
    window.addEventListener(evt, function() {
        console.log(evt);
        changeHW();
    }, false);
    $(document).ready(function(){
      changeHW();
    });
    function changeHW() {
      var width = document.documentElement.clientWidth;
         var height =  document.documentElement.clientHeight;
          $print =  $('#print');
         if( width > height ){

            $print.width(width);
            $print.height(height);
            $print.css('top',  0 );
            $print.css('left',  0 );
            $print.css('transform' , 'none');
            $print.css('transform-origin' , '50% 50%');
         }
         else{
            $print.width(height);
            $print.height(width);
            $print.css('top',  (height-width)/2 );
            $print.css('left',  0-(height-width)/2 );
            $print.css('transform' , 'rotate(90deg)');
            $print.css('transform-origin' , '50% 50%');
         }
    }
    </script>
</head>
<body class="webpBack">
    <div id="print">
        <p>lol</p>
        作者：stois
链接：http://www.jianshu.com/p/9c3264f4a405
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
    </div>
</body>
</html>